<template>
  <div class="login-page" ref="wrapper">
    <div class="login-logo"></div>
    <div class="login-content" v-show="model == 1">
      <p class="login-content-item"><i class="fa fa-mobile" style="font-size:28px;"></i><input type="text" placeholder="请输入帐号/手机/身份证" class=""></p>      
      <p class="login-content-item"><i class="fa fa-lock" style="font-size:20px;"></i><input type="password" placeholder="请输入密码"></p>
    </div>
    <div class="login-content" v-show="model == 2">
      <p class="login-content-item"><i class="fa fa-mobile" style="font-size:28px;"></i><input type="text" placeholder="请输入帐号/手机/身份证" class=""></p>
      <p class="login-content-item"><i class="fa fa-envelope-o" style="font-size:20px;"></i><input type="text" style="width:30%;" placeholder="请输入验证码"><button class="btn-blue-min btn-effect">获取验证码</button></p>
    </div>
    <router-link style="display:flex; margin: 0 20px;" to="/match"><mt-button style="flex:1; border-radius: 100px; background: linear-gradient(45deg,#2ac5ff,#0d5dff);" type="primary">登录</mt-button></router-link>
    <div class="tc mt15 f16">
      <router-link to="/forget" class="blue">忘记密码</router-link>
      <i class="ml10 mr10" style="color: #ccc;">|</i>
      <router-link to="/register" class="blue">立即注册</router-link>
    </div>
    <div class="tc mt30">
      <p class="gray f14 mb10">快捷登录</p>
      <div style="display: flex; margin:0 30%; ">
        <span style="flex:1;" @click="model=2"><b style="border-radius:50px; margin:0 auto; background:#098ef5; width:30px; height:30px; overflow:hidden; line-height:32px; display:block;"><i class="fa fa-mobile" style="color:#fff; font-size:25px; line-height: 30px;"></i></b></span>
        <span style="flex:1;" ><b style="border-radius:50px; margin:0 auto; background:#10ad2a; width:30px; height:30px; overflow:hidden; line-height:32px; display:block;"><i class="fa fa-weixin" style="color:#fff; font-size:16px;"></i></b></span>
        <span style="flex:1;" @click="model=1"><b style="border-radius:50px; margin:0 auto; background:#fb1d46; width:30px; height:30px; overflow:hidden; line-height:32px; display:block;"><i class="fa fa-key" style="color:#fff; font-size:16px;"></i></b></span>
        <!-- <span style="flex:1;"><b style="border-radius:50px; margin:0 auto; background:#fb1d46; width:30px; height:30px; overflow:hidden; line-height:32px; display:block;"><i class="fa fa-weibo" style="color:#fff; font-size:16px;"></i></b></span> -->
        
      </div>
    </div>
  </div>
</template>

<script>
export default { 
  data () {
    return {
      model:1
    }
  },
  mounted(){ 
    this.$refs.wrapper.style.height = document.documentElement.clientHeight + "px"; 
  },
  methods:{
    
  }
}
</script>
